/*
* @Author: ywl
* @Last Modified by: ywl
* Description:
1.表单展示组件
2.rowType: 表单是否栅格布局 false => 否; true => 是
3.colSpan: 栅格布局col占比
4.formStyle: 表单样式 true => 表单垂直排列; false => 表单水平排列
5.dicType: 表单项配置动态字典类型值
6.dicProp: 表单项配置动态字典的枚举字段
7.type: 表单项输入框类型 input => 输入框; select => 下拉框; datePicker => 日期时间选择框;slot => 表单项插槽
8.selectList: 下拉框字典选项集合
9.dateType: 表单项日期时间选择框的类型
10.format: 表单项时间选择框的展示值样式
11.valueFormat: 表单项时间选择框的绑定值
12.popperAppend: 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false
*/
<template>
  <div ref="myFormRef" class="myForm">
    <el-form
      ref="queryFormRef"
      :inline="formOption.inline"
      :model="value"
      class="pms-details"
      :class="{ 'pms-details-top': isMarTop }"
      :size="formOption.size"
      :disabled="formOption.disabled"
      :label-width="formOption.labelWidth"
    >
      <el-row type="" :gutter="24">
        <el-col v-for="(item, index) in formOption.itemData" :key="item + index" :span="item.colSpan">
          <el-form-item :class="item.class || ''" :label="item.label" :prop="item.prop" :rules="item.rule">
            <template v-if="item.type === 'slot'">
              <slot :name="item.prop" />
            </template>
            <el-input
              v-else-if="item.type === 'input'"
              v-model="value[item.prop]"
              :clearable="item.clearable"
              :size="item.size"
              :disabled="item.disabled"
              :style="{ width: item.width }"
              :placeholder="item.placeholder ? item.placeholder : ''"
              @blur="value[item.prop] = $event.target.value.trim()"
              @change="handleOnEvent(item.prop, value[item.prop])"
            />
            <el-select
              v-else-if="item.type === 'select'"
              v-model="value[item.prop]"
              :size="item.size"
              :multiple="item.multiple"
              :collapse-tags="item.collapseTags"
              :multiple-limit="item.multipleLimit"
              :popper-append-to-body="item.popperAppend"
              :clearable="item.clearable"
              :style="{ width: item.width }"
              :disabled="item.disabled"
              placeholder="请选择"
              @change="handleOnEvent(item.prop, value[item.prop])"
            >
              <el-option
                v-for="it in selectList[item.dicType]"
                :key="it[item.dicProp.value]"
                :label="it[item.dicProp.label]"
                :value="it[item.dicProp.value]"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'OrderForm',
  props: {
    // 表单配置项数据
    formOption: {
      type: Object,
      default: () => ({})
    },
    // 表单项的值集合
    value: {
      type: Object,
      default: () => ({})
    },
    // 下拉框字典选项集
    selectList: {
      type: Object,
      default: () => ({})
    },
    isMarTop: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.initData(this.formOption)
  },
  methods: {
    // 事件
    handleOnEvent(prop, row) {
      this.$emit('handleEvent', prop, row)
    },
    // 初始化表单默认值
    initData(dataOption) {
      dataOption.itemData.forEach(item => {
        this.$set(this.value, item.prop, item.value ?? '')
      })
      console.log(this.value, 'dataOptiondataOption')
    },
    // 重置表单
    reset() {
      this.$refs.queryFormRef.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.myForm {
  width: 100%;
  margin-right: 40px;
}

.el-form-item {
  width: 100%;
}

.query-form {
  font-size: small;

  .el-form-item {
    width: 100%;
    height: 50px;

    .el-form-item__content {
      width: 68%;
      height: 50%;
    }

    .el-input__inner {
      height: 32px !important;
    }

    .el-form-item__label {
      // width: 20%;
      padding: 0 4px 0 0;
      font-size: 14px;
      margin-right: 20px;
    }
  }
}
</style>

